<?xml version='1.0' encoding='ISO-8859-1' ?>
<ui:composition template="/templates/padrao.xhtml"
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:p="http://primefaces.org/ui">

	<ui:define name="centro">
		<p:growl id="msg" showDetail="true" life="5000" />
		
		<h:form id="formPrincipal" prependId="false" onLoad="reset()">
			<p:dataTable id="datatableJogo" 
				var="jogo"
				styleClass="userDataTableStyle"
				value="#{jogoMB.listarJogos}"
				paginator="true"
				rows="10"
				paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="5,10,15" >
				
				<f:facet name="header">
					#{msg.jogoTitulo}
				</f:facet>
				
                <p:column headerText="#{msg.jogoNome}">
                     #{jogo.nome}
                 </p:column>

                <p:column headerText="#{msg.jogoDescricao}">
                     #{jogo.descricao}
                 </p:column>
                 
				<p:column headerText="#{msg.jogoManutencao}" style="width:10%">
		        	<p:toolbar id="editaToolBar">
				        <p:toolbarGroup align="center" >
						    <p:commandButton id="btnDetalhe" title="#{msg.jogoDetalhe}"
						    				icon="ui-icon-search"
						    				oncomplete="jogoDetalheDlg.show()" 
						    				update=":display">
						    	<f:setPropertyActionListener value="#{jogo}" target="#{jogoMB.jogo}" />
							</p:commandButton>

							<p:commandButton id="btnAlterar" title="#{msg.jogoAlterar}" 
											icon="ui-icon-pencil"
											oncomplete="alterarDlg.show()" 
											update=":formAlterar:apresentaAlterarJogo" >
								<f:setPropertyActionListener value="#{jogo}" target="#{jogoMB.jogo}" />
							</p:commandButton>
							  
							<p:commandButton id="btnExcluir" title="#{msg.jogoExcluir}" 
											icon="ui-icon-trash" 
											oncomplete="confirmacaoExcluir.show()" 
											update=":jogoDisplay" >
								<f:setPropertyActionListener value="#{jogo}" target="#{jogoMB.jogo}" />
							</p:commandButton>
						</p:toolbarGroup>
					</p:toolbar>
				</p:column>
				
				<f:facet name="footer">
					<p:commandButton value="#{msg.jogoNovo}" 
									icon="ui-icon-document"
									actionListener="#{jogoMB.prepararAdicionarJogo}"
									oncomplete="incluirDlg.show();" 
									update=":formIncluir:apresentaIncluirJogo" />
				</f:facet>
			</p:dataTable>
		</h:form>
		
		<p:dialog header="#{msg.jogoJoDetalhe}" widgetVar="jogoDetalheDlg" resizable="false" id="jogoDlg" showEffect="fade" hideEffect="explode" appendToBody="true" modal="true" >
	        <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">
	            #{msg.jogoNome}:
	            <h:outputText value="#{jogoMB.jogo.nome}" style="font-weight:bold"/>
	
	            #{msg.jogoDescricao}:
	            <h:outputText value="#{jogoMB.jogo.descricao}" style="font-weight:bold"/>
	        </h:panelGrid>
	    </p:dialog>
	    
	    <p:dialog id="incluir" header="#{msg.jogoIncluir}" widgetVar="incluirDlg" showEffect="slide" appendToBody="true" modal="true" >			
			<h:form id="formIncluir" prependId="false">
				<h:panelGrid id="apresentaIncluirJogo" columns="2" cellpadding="5">
					<h:outputLabel for="nomeI" value="#{msg.jogoNome}: " />
					<h:inputText id="nomeI" value="#{jogoMB.jogo.nome}" size="35" 
					required="true" requiredMessage="#{msg.jogoNomeReq}"/>
	
					<h:outputLabel for="descricaoI" value="#{msg.jogoDescricao}: " />
					<h:inputText id="descricaoI" value="#{jogoMB.jogo.descricao}" size="65" 
					required="true" requiredMessage="#{msg.jogoDescReq}"/>
				</h:panelGrid>
	
				<p:commandButton value="#{msg.jogoIncluir}"
								oncomplete="handleSubmitRequest(xhr, status, args, 'incluirDialogo', 'formIncluir');"
								icon="ui-icon-document"
								actionListener="#{jogoMB.adicionarJogo}"
								update=":formPrincipal:datatableJogo, :msg" />
			</h:form>									
		</p:dialog>
		
		<p:dialog id="alterarDialogo" header="#{msg.jogoAlterar}" widgetVar="alterarDlg" showEffect="slide" appendToBody="true" modal="true" >
			<h:form id="formAlterar" prependId="false">
				<h:panelGrid id="apresentaAlterarJogo" columns="2" cellpadding="5">
					<h:outputLabel for="nomeA" value="#{msg.jogoNome}: " />
					<h:inputText id="nomeA" value="#{jogoMB.jogo.nome}" size="35" 
					required="true" requiredMessage="#{msg.jogoNomeReq}"/>
	
					<h:outputLabel for="descricaoA" value="#{msg.jogoDescricao}: " />
					<h:inputText id="descricaoA" value="#{jogoMB.jogo.descricao}" size="65" 
					required="true" requiredMessage="#{msg.jogoDescReq}"/>
				</h:panelGrid>
	
				<p:commandButton value="#{msg.jogoAlterar}"
								oncomplete="handleSubmitRequest(xhr, status, args, 'alterarDialogo', 'formAlterar');"
								icon="ui-icon-pencil"
								actionListener="#{jogoMB.alterarJogo}"
								onclick="alterarDlg.hide()"
								update=":formPrincipal:datatableJogo, :msg" />
			</h:form>									
		</p:dialog>
		
		<p:confirmDialog message="#{msg.jogoMsg}" id="dlgExcluir" header="Excluir" severity="alert" widgetVar="confirmacaoExcluir" appendToBody="true" >
           
	        <p:outputPanel id="jogoDisplay" style="display:block;margin-top:10px;">  
	          	#{jogoMB.jogo.nome}
	          	<br />
	          	#{jogoMB.jogo.descricao}
	          	<br /><br />
			</p:outputPanel>
          
            <p:commandButton update=":formPrincipal:datatableJogo, :msg" value="#{msg.jogoOK}" oncomplete="confirmacaoExcluir.hide()"
                actionListener="#{jogoMB.excluirJogo}"  />
            <p:commandLink value="#{msg.jogoCancelar}" onclick="confirmacaoExcluir.hide()" />
         
		</p:confirmDialog>
		
		<script type="text/javascript">  
		function handleSubmitRequest(xhr, status, args, dialogName, formName) {  
			dialog = jQuery('#' + dialogName);
			
			if(args.validationFailed) {  
			    dialog.effect("shake", { times:3 }, 100);  
			} else {
				if(formName == "formIncluir") {
					clearForm(formName);
				} else {
					dialog.hide();			
				}
			}  
		}
		  
		function clearForm(formName){
		    jQuery('#' + formName).each(function(){
				this.reset();
			});
		}
		</script>				
	</ui:define>
</ui:composition>